<template>
    <div class="index">
        <div class="header">
            <ul>
                <li><a @click="userDetail()"> <img class="headerImg mouse" :src="userStore.user.img" alt=""> </a> </li>

                <li>
                    <el-icon color="#eee" class="no-inherit mouse" size="1.5em" @click="go('chatweb')"><ChatDotRound /></el-icon>
                </li>
                <li>
                    <el-icon color="#eee" class="no-inherit mouse" size="1.5em" @click="go('friend')"><User /></el-icon>
                </li>
            </ul>



        </div>
        <div class="footer">
            <ul>
                <li>
                    <el-icon color="#eee" class="no-inherit mouse" size="1.5em" @click="go('setup')"><Operation /></el-icon>

                </li>
            </ul>
            
        </div>
    </div>
</template>

<script setup>
import { defineOptions } from 'vue';
import { useRouter } from 'vue-router';
import { ChatDotRound ,User,Operation} from '@element-plus/icons-vue';
import { useUserStore } from '@/stores';
const userStore = useUserStore();
defineOptions({
    name: 'detail'
})
const router = useRouter();
const emit = defineEmits(['userDetail']);
const userDetail = () => {
    emit('userDetail')
}
const chat = () => {
    console.log('chat');
}
const go = (lj) =>{
    router.push('/'+lj)
}

</script>

<style lang="less" scoped>
.index {
    display: flex;
    flex-direction:column;
    text-align: center;
    width: 100%;
    justify-content: space-between;
    vertical-align: middle;
    height: 100%;

}
.header ul {
    display: flex;
    flex-direction:column;
    text-align: center;
    vertical-align: middle;
    align-items: center;
}
.header ul li {
    margin-top: 3vh;
}

.header ul li:first-child {
    border-radius: 10%;
    overflow: hidden;
    width: 3vw;
    height: 3vw;
    
}

.headerImg {
    width: 100%;
    height: 100%;

}
</style>